<template>
  <div>
    <a-modal :visible="visible" title="评论" @ok="handleOk">
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOk">确认</a-button>
      </template>
      <a-textarea
          v-model:value="comment"
          placeholder="请输入你的评论"
          size="large">
      </a-textarea >
    </a-modal>
  </div>
</template>

<script>
import {computed, defineComponent, ref} from "vue";
import {useStore} from "vuex";
import {message} from "ant-design-vue";

export default defineComponent({
  name: "backComment",
  props: ['commentId', 'visible', 'targetUserId'],
  methods: {
    handleCancel() {
      let obj = {typeStatus: false}
      this.$emit("closeBackComment", obj)
      this.clearComment()
    },
    handleOk() {
      if (this.comment.length>50){
        message.error("不能超出评论字数")
        return
      }

      if (this.comment==''){
        message.warn("评论内容不能为空!")
        return
      }
      let obj = {
        backInfo: this.comment,
        backId: this.userinfo.userId,
        targetUserId: this.targetUserId,
        commentId: this.commentId
      }
      this.$httpPost("/xy/backComment/add", obj).then(res => {
        if (res.data.code == 0) {
          obj.typeStatus = true
          obj.id = res.data.id
          obj.createTime = res.data.createTime
          this.$emit("closeBackComment", obj)
          this.clearComment()
        } else {
          obj.typeStatus = false
          this.$emit("closeBackComment", obj)
          this.clearComment()
        }
      })
    },
    clearComment() {
      this.comment = ''
    }
  },
  setup() {
    const store = useStore()
    const comment = ref('');
    return {
      comment,
      userinfo: computed(() => {
        return store.state.user
      })
    };
  },
})
</script>

<style scoped>

</style>